<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>
            遍历 总结
        </h1>
        <p>
            v-for指令: <br>
                1.用于展示列表数据 <br>
                2.语法: v-for="(item， index) in xxx”:key="yyy" <br>
                3.可遍历:数组、对象、字符串 (用的很少)、指定次数(用的很少)  <br>
        </p>
        <!-- 遍历数组（用的多） -->
        <h2>遍历数组</h2>
        <ul>
            <li v-for="(item,index) in persons" :key="index">{{item.name}}--{{item.age}}</li>
        </ul>

        <!-- 遍历对象 -->
        <h2>遍历对象</h2>
        <ul>
            <li v-for="(item,key) in obj" :key="key">{{item}}--{{key}}</li>
        </ul>

        <!-- 遍历字符串 -->
        <h2>遍历字符串</h2>
        <ul>
            <li v-for="(item,index) in str" :key="index">{{item}}--{{index}}</li>
        </ul>
        <!-- 遍历指定次数 -->
        <h2>遍历指定次数</h2>
        <ul>
            <li v-for="(item,index) in 5" :key="index">
                {{item}}--{{index}}
            </li>
        </ul>
    </div>
</body>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                msg: 'hello world',
                persons:[
                    {
                        name:'张三',
                        age:18
                    },
                    {
                        name:'李四',
                        age:20
                    },
                    {
                        name:'王五',
                        age:22
                    }
                ],
                //对象
                obj:{
                    name:'张三',
                    age:18,
                    sex:'男'
                },
                //字符串
                str:'abc'        
            }
        })
    </script>
</html>